<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>联系人回收站</span>
    </div>
    <div class="home-container">

      <v-searchForm :form-data="formData" :form-title="formTitle"/>

      <v-tableBtns
        :table-title="tableTitle"
        :table-data="tableData"
        :show-export="false"
        :show-del="true"
        @del="delMultiple"
      />
      <v-table

        :table-title="tableTitle"
        :table-data="tableData"
        :recoverable="true"
        :editable="false"
        @recover="recover"
        @del="del"
      />
      <v-pagination
        :page-info="pageInfo"
        :get-table-list="getTableList"
      />
    </div>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import UploadExcelComponent from '@/components/UploadExcel/index.vue'

export default {
  name: 'Home',
  components: { UploadExcelComponent },
  data() {
    return {
      // f分页
      pageInfo: {
        pageNumber: 1,
        pageSize: 30,
        totalPage: 0,
        totalRow: 0
      },

      formTitle: [
        {
          cn: '客户名称：',
          en: 'client_name'
        },
        {
          cn: '联系人：',
          en: 'contact'
        },
        {
          cn: '联系方式：',
          en: 'phone'
        },
        {
          cn: '负责人：',
          en: 'principle'
        }
      ],
      filter_info: {
        client_name: '',
        contact: '',
        phone: '',
        principle: ''
      },
      tableTitle: [
        {
          cn: '客户名称',
          en: 'client_name'
        },
        {
          cn: '联系人',
          en: 'contact'
        },
        {
          cn: '手机号',
          en: 'phone'
        },
        {
          cn: '邮箱',
          en: 'email'
        },
        {
          cn: '创建时间',
          en: 'create_time'
        },
        {
          cn: '负责人',
          en: 'principle'
        },
        {
          cn: '删除人',
          en: 'deleter'
        },
        {
          cn: '删除时间',
          en: 'del_time'
        }
      ],
      tableData: [
        {
          client_name: 1,
          contact: '关注1',
          phone: '杭州xx公司',
          email: '张三',
          create_time: '1231232132',
          principle: '2017-2-4',
          deleter: '王五',
          del_time: '王五'
        },
        {
          client_name: '关注2',
          contact: '杭州xx公司',
          phone: '李四',
          email: '123123232132',
          create_time: '2017-2-4',
          principle: '2018-11-11',
          deleter: '狗蛋',
          del_time: '狗蛋'
        }
      ]

    }
  },
  methods: {
    getTableList(data) {
      let datas
      if (this.onFilter) {
        datas = { ...data, filter_info: this.filter_info }
      } else {
        datas = data
      }
      this.$post('action/Contacts/dataGrid', datas)
        .then(res => {
          let list
          if (res.list && res.list.length) {
            list = res.list.map((item, index) => {
              return item
            })
            this.pageInfo.totalPage = res.totalPage
            this.pageInfo.totalRow = res.totalRow
          }
          this.tableData = list || []
        })
    },

    // 搜索
    search() {
      const data = {}
      const origin = this.filter_info
      for (const key in origin) {
        if (origin[key] && key !== 'created_at') {
          data[key] = origin[key]
        } else if (key === 'created_at') {
          data.startDate = origin[key][0]
          data.endDate = origin[key][1]
        }
      }

      this.onFilter = true
      this.filter_info = data
      this.getTableList()
    },
    reset() {
      this.filter_info = {}
      this.onFilter = false
      this.getTableList()
    },

    delMultiple() {

    },

    recover(val) {
      console.log(val)
    },
    del(val) {
      console.log(val)
    }

  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

</style>
